<template>
  <el-container>
    <el-header style="border-bottom: 1px solid #ccc;">

      <Front :user="user"></Front>

    </el-header>
    <div>
<!--      左侧导航栏-->
<!--      <FrontAside></FrontAside>-->
    </div>


    <el-container>




<!--      el-main 导航菜单-->
      <el-main>
        <!-- 表示当前页面的子路由会在router-view 里面展示 -->
<!--       @refreshUser 注解可能会在用户身份验证或会话管理方面使用，在需要刷新用户信息时触发特定的操作或方法。-->
        <div style="width: 1200px; margin: 0 auto">
          <el-card>
          <router-view @refreshUser="getUser"/>
          </el-card>
        </div>

      </el-main>

    </el-container>

  </el-container>
</template>

<script>
import Front from "@/views/front/FrontHeader.vue";
import FrontAside from "@/views/front/FrontAside.vue";

export default {
  name: 'HomeView',
  data() {
    return {
      user: {},
    }
  },
  created(){
    //一开始重后台获取最新的数据
    this.getUser()
  },
  components:{
    Front,
    FrontAside,
  },

  methods: {
    //刷新一次数据让头像实时更新，让头像实时更新
    getUser(){
      let username = localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")).username : ""
      this.request.get("/user/username/" + username).then(res=>{
        //重新赋值最小user数据
        this.user = res.data
      })
    }
  }
}
</script>
<style>
.headerBg {
  background-color: #eee !important;
}
</style>

